<template>
  <div>
    <el-dialog
      v-model="props.visible"
      :fullscreen="true"
      @opened="onOpened"
      @closed="emit('update:visible', false)"
      :show-close="false"
      class="no-header-dialog"
    >
      <template #header>
        <el-button type="danger" @click="onCancel" plain>返 回</el-button>
        <el-button type="primary" plain @click="update">保 存</el-button>
      </template>
      <div class="app-container" v-loading="loading">
        <v-form-designer ref="designerRef" style="" />
      </div>
    </el-dialog>

    <el-dialog
      title="保存"
      v-model="saveFormVisible"
      width="40%"
      @close="saveFormVisible = false"
      :close-on-click-modal="false"
    >
      <el-form
        :model="form"
        label-width="100px"
        class="demo-form"
        label-position="right"
        size="mini"
        style="width: 80%"
        v-loading="loading"
      >
        <el-form-item label="版本" prop="designVersion">
          <el-input
            size="mini"
            type="number"
            v-model="form.designVersion"
          ></el-input>
        </el-form-item>
        <el-form-item label="表单类型" prop="formType">
          <el-input size="mini" type="text" v-model="form.formType"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            size="mini"
            type="text"
            v-model="form.description"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="saveFormVisible = false" size="normal"
          >取 消</el-button
        >
        <el-button type="primary" @click="saveForm" size="normal"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, unref,nextTick ,watch} from 'vue'
import { useDynamicFormDesignStore } from '@/stores/dynamicFormDesign'
import formDataAdapter from './formComponents/formDataAdapter'

const props = defineProps({
  visible: {
    default: false
  },
  value: {
    default: () => ({
      title: "",
      formType:"",
      description:"",
      version:0,
    })
  },
  workflowValue: {
    default: () => ({
      id: "",
      activeVersion: "",
    })
  }
})


const dynamicFormDesignStore = useDynamicFormDesignStore()
const emit = defineEmits(['update:visible', 'closed', 'update:value'])

const loading = ref(false)

const designFramework = 'vform'

const designerRef = ref(null)

const form =ref({
    title: "",
    formType:"",
    description:"",
    designVersion:0,
    workflowId: {
      id: "",
      version: "",
    },
  })
const saveFormVisible = ref(false)

watch(()=>props.value,()=>{
  form.value.title = props.value.title;
  form.value.formType = props.value.formType;
  form.value.description = props.value.description;
  form.value.designVersion = props.value.version;
},{deep:true})


const onCancel = () => {
  emit('update:visible', false)
}

const onOpened = async () => {
  await nextTick()
  getDesign(props.value);
}

const update = () => {
  saveFormVisible.value = true
}

const getDesign = async (row) => {
  const res = await dynamicFormDesignStore.getFormDesignVersion({id:row.formDesignId,version:row.version})
  if (res && res.designContent) {
    if (res.designFramework !== designFramework) {
      const fromJson = formDataAdapter.defaultToVfrom(res.designContent)
      ;(designerRef.value ).setFormJson(
        fromJson
      )
    } else {
      ;(designerRef.value ).setFormJson(res.designContent)
    }
  }
  else{
    ;(designerRef.value ).clearDesigner()
  }
}

const saveForm = async ()=>{

  form.value.designContent = JSON.stringify((designerRef.value ).getFormJson())
  form.value.workflowId = {id:props.workflowValue.id,version:props.workflowValue.activeVersion};
  form.value.workflowId.version = Number(form.value.workflowId.version)
  form.value.designFramework = designFramework;


  console.log('form',unref(form))
  loading.value = true
  const res =await dynamicFormDesignStore.addOrUpdate(unref(form))
  loading.value = false
  saveFormVisible.value = false
  emit('closed')
  emit('update:visible', false)
}
</script>

<style lang="less" scoped>
:deep(.app-container) {
  .main-container .main-header {
    display: none; //隐藏表单设计器的标题
  }
}

:deep(.no-header-dialog) {
  padding: 0px !important;
  .el-dialog__header {
    padding: 9px;
    height: 30px;
    text-align: right;
  }
  .el-dialog__body {
    width: 100%;
    height: calc(100vh - 50px) !important;
    padding: 0px !important;
  }
}
</style>
